<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="title"
    :showTop="false"
    :dark="loaded ? false : true"
    :callBackUrl="gotoMyTabUrl"
    :hideSafeArea="true"
  >
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'">
      <view class="second-major-name">{{ secondMajorName }}</view>
      <view class="choose-subject"
        >选科组合：{{ currentSubject }}
        <view class="change-btn" @click="changeSubject">
          <image :src="edit" class="edit-img"></image>
          <text class="text">更换</text>
        </view>
        <!-- <view class="change-btn" @click="changeSubject">更换</view> -->
      </view>
      <view class="number-info">
        专业匹配院校<span>{{ schoolNumber }}</span
        >所，开设专业<span>{{ majorNumber }}</span
        >个
      </view>
      <scroll-view
        scroll-x="true"
        :scroll-into-view="currentTypeId"
        class="second-box"
        id="scrollView"
      >
        <view
          :class="
            currentType == item.name
              ? 'active-second-box-item'
              : 'second-box-item'
          "
          v-for="(item, index) in majorList"
          :key="index"
          :id="'professionName' + index"
          @click="changeCurrentType(item)"
        >
          <view class="name">
            {{ item.name }}（{{ item.professionNum }}个）</view
          >
          <view class="per"
            >匹配率{{
              Number(item.matchRate).toFixed(2) == 0.0
                ? '  --'
                : Number(item.matchRate).toFixed(2) + '%'
            }}</view
          >
        </view>
      </scroll-view>
      <view class="third-box">
        <view class="majorFilterContainer">
          <view class="filter-box">
            <view
              v-if="!hideFilters"
              class="matching-degree"
              @click="showPicker('showMatchingDegree')"
            >
              {{ currentMatchingDegree }}</view
            >
            <view
              v-if="!hideFilters"
              class="education-background"
              @click="showPicker('showEducationBackground')"
            >
              {{ currentEducationBackground }}</view
            >
            <view class="search-major" :class="{ expanded: hideFilters }">
              <input
                type="text"
                v-model="matchName"
                placeholder="查高校"
                @focus="handleFocus"
                @blur="handleBlur"
              />
            </view>
          </view>
          <view v-if="showEducationBackground" class="school-filter">
            <view class="filter-first">
              <view class="title">办学层次</view>
              <view class="choose-box">
                <view
                  :class="
                    schoolRunningLevelIndexList.includes(index)
                      ? 'box-item-active'
                      : 'box-item'
                  "
                  v-for="(item, index) in schoolRunningLevelList"
                  :key="index"
                  @click="chooseSchoolRunningLevel(item, index)"
                  >{{ item.label }}</view
                >
              </view>
              <view class="title">办学类型</view>
              <view class="choose-box">
                <view
                  :class="
                    schoolRunningTypeIndexList.includes(index)
                      ? 'box-item-active'
                      : 'box-item'
                  "
                  v-for="(item, index) in schoolRunningTypeList"
                  :key="index"
                  @click="chooseSchoolRunningType(item, index)"
                  >{{ item.label }}</view
                >
              </view>
              <view class="title">院校特色</view>
              <view class="choose-box">
                <view
                  :class="
                    schoolFeatureIndexList.includes(index)
                      ? 'box-item-active'
                      : 'box-item'
                  "
                  v-for="(item, index) in schoolFeatureList"
                  :key="index"
                  @click="chooseSchoolFeature(item, index)"
                >
                  {{ item.label }}</view
                >
              </view>
              <view class="title">院校类型</view>
              <view class="choose-box">
                <view
                  :class="
                    schoolTypeIndexList.includes(index)
                      ? 'box-item-active'
                      : 'box-item'
                  "
                  v-for="(item, index) in schoolTypeList"
                  :key="index"
                  @click="chooseSchoolType(item, index)"
                >
                  {{ item.label }}</view
                >
              </view>
            </view>
            <view class="filter-second">
              <view class="left-btn" @click="reset">重置</view>
              <view class="right-btn" @click="search">确定</view>
            </view>
          </view>
          <view class="jump-text" @click="jumpToMajorDeatil"
            >查看 {{ currentType }} 专业介绍<u-icon
              name="arrow-right"
              color="#999990"
              size="24"
            ></u-icon
          ></view>
          <view class="line"></view>
          <view class="school-list">
            <view class="title"
              >以下是符合筛选条件的选科匹配院校专业 ({{
                majorSchoolNumber
              }})</view
            >
            <scroll-view
              class="schoolListContainer"
              scroll-y="true"
              @scroll="onScroll"
              @scrolltolower="onScrollToLower"
              v-if="schoolList.length > 0"
            >
              <view
                class="school-info"
                v-for="(item, index) in schoolList"
                :key="index"
                :class="
                  index == schoolList.length - 1
                    ? 'schoolList-item-padding'
                    : 'schoolList-item-border'
                "
                @click="gotoSchool(item)"
              >
                <view class="left">
                  <image class="avatar" mode="aspectFill" :src="item.icon" />
                </view>
                <view class="right">
                  <view class="name">{{ item.name }}</view>
                  <view class="tags">
                    <view v-if="item.levelName">
                      <view
                        v-for="(_item, _index) in item.levelName.split(',')"
                        :key="_index"
                        >{{ _item }}</view
                      >
                    </view>
                    <view v-if="item.dualClassName">
                      <view
                        v-for="(_item, _index) in item.dualClassName
                          .split(',')
                          .slice(0, 3)"
                        :key="_index"
                        >{{ _item }}</view
                      >
                    </view>
                    <!-- <view v-if="item.nature_name">
                      <view v-for="(_item, _index) in item.nature_name.split(',')" :key="_index">{{ _item }}</view>
                    </view>
                    <view v-if="item.college_type">
                      <view v-for="(_item, _index) in item.college_type.split(',')" :key="_index">{{ _item }}</view>
                    </view> -->
                  </view>
                  <view class="major-info">{{ item.desc }}</view>
                  <view class="subject-info"
                    >首选：<view
                      v-for="(ele, _index) in subjectFirstList"
                      :key="_index"
                      :class="ele == schoolInfoFirstSubject ? 'active' : ''"
                      >{{ ele }}</view
                    >;
                    <text class="subject-info-text">再选：</text>
                    <view v-if="schoolInfoSecondSubject != '不限'">
                      <span
                        v-for="(item, index) in subjectSecondList"
                        :key="index"
                        :class="
                          schoolInfoSecondSubject.includes(item) ? 'active' : ''
                        "
                        >{{ item }}</span
                      >
                    </view>
                    <view v-else>不限</view>
                  </view>
                </view>
              </view>
            </scroll-view>
            <Empty
              v-else
              :baseImg="emptyImg"
              text="暂无数据"
              :fontWeight="400"
              textColor="#bfbfbf"
              class="empty"
              spacing="0"
            />
          </view>
        </view>
      </view>
      <!-- 省份城市选择器 -->
      <u-select
        v-model="showMatchingDegree"
        mode="mutil-column-auto"
        :list="customRegionData"
        @confirm="handleMatchingDegreeConfirm($event)"
      ></u-select>
    </view>
    <u-popup v-model="showChooseSubjectPopup" mode="bottom" border-radius="14">
      <view class="choose-subject-box">
        <view class="choose-title">
          <view class="left">首选</view>
          <view class="right">选择一门学科</view>
        </view>
        <view class="choose-box">
          <view
            :class="
              item.id == currentFirstSubject.id
                ? 'choose-box-item-selected'
                : 'choose-box-item'
            "
            v-for="(item, index) in firstSubject"
            :key="index"
            @click="selectFirstSubject(item)"
            >{{ item.name }}
          </view>
        </view>
        <view class="choose-title">
          <view class="left">再选</view>
          <view class="right">选择二门学科</view>
        </view>
        <view class="choose-box">
          <view
            :class="
              currentSecondSubjectList.includes(item)
                ? 'choose-box-item-selected'
                : 'choose-box-item'
            "
            v-for="(item, index) in secondSubject"
            :key="index"
            @click="selectSecondSubject(item)"
            >{{ item.name }}
          </view>
        </view>
        <view class="search-btn" @click="changeData">确定</view>
      </view>
    </u-popup>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>
<script>
import { cardRegist } from '@/api/modules/career';
import ShareMixin from '@/mixins/share';
import LoginDialog from '@/components/LoginDialog';
import { customRegionData } from '../utils/regionData.js';
import Empty from '@/components/Empty.vue';

import { positionTagColleges } from '@/api/modules/career';
import {
  getProfessionSonList,
  getCollegeProfessionList,
} from '@/api/modules/gk';
export default {
  mixins: [ShareMixin],
  components: {
    Empty,
    LoginDialog,
  },
  data() {
    return {
      personId: '',
      shareTitle: '震惊！同分数段的同学，靠选科组合提前锁定百万年薪赛道',
      sharePath:
        '/pagesSub/nationalCollegeEntranceExamination/majorDetail/index',
      imageUrl:
        'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png',
      edit: 'https://img3.job1001.com/ypMp/elan/images/saas/edit.png',
      pageNo: 1,
      wholePositionTagIdList: [],
      positionTagIdList: [],
      regionId: '',
      positionTagId: '',
      customRegionData,
      firstSubject: [
        {
          name: '物理',
          id: '11',
        },
        {
          name: '历史',
          id: '12',
        },
      ],
      secondSubject: [
        {
          name: '化学',
          id: '14',
        },
        {
          name: '生物',
          id: '13',
        },
        {
          name: '政治',
          id: '15',
        },
        {
          name: '地理',
          id: '16',
        },
      ],
      currentFirstSubject: {}, // 当前选中的必须按科目
      currentSecondSubjectList: [], // 选择两个科目的数据
      showChooseSubjectPopup: false,
      schoolInfoFirstSubject: '物理',
      schoolInfoSecondSubject: ['化学', '生物'],
      subjectFirstList: ['物理', '/', '历史'],
      subjectSecondList: ['化学', '/', '生物', '/', '政治', '/', '地理'],
      majorSchoolNumber: '',
      schoolRunningLevelList: [
        {
          label: '普通本科',
          value: '普通本科',
        },
        {
          label: '专科（高职）',
          value: '专科（高职）',
        },
      ],
      schoolRunningLevelValueList: [],
      schoolRunningLevelIndexList: [],

      schoolRunningTypeList: [
        {
          label: '公办',
          value: '公办',
        },
        {
          label: '民办',
          value: '民办',
        },
        {
          label: '中外合作办学',
          value: '中外合作办学',
        },
        {
          label: '内地与港澳台地区合作办学',
          value: '内地与港澳台地区合作办学',
        },
      ],
      schoolRunningTypeValueList: [],
      schoolRunningTypeIndexList: [],
      schoolFeatureList: [
        {
          label: '985',
          value: '985',
        },
        {
          label: '211',
          value: '211',
        },
        {
          label: '双一流',
          value: '双一流',
        },
        {
          label: '保研资格',
          value: '保研资格',
        },
        {
          label: '教育部直属',
          value: '教育部直属',
        },
        {
          label: '中央部委',
          value: '中央部委',
        },
        {
          label: '强基计划',
          value: '强基计划',
        },
        {
          label: '双高计划',
          value: '双高计划',
        },
        {
          label: '国际本科',
          value: '国际本科',
        },
      ],
      schoolFeatureValueList: [],
      schoolFeatureIndexList: [],
      schoolTypeList: [
        {
          label: '综合',
          value: '综合',
        },
        {
          label: '理工',
          value: '理工',
        },
        {
          label: '农林',
          value: '农林',
        },
        {
          label: '医药',
          value: '医药',
        },
        {
          label: '师范',
          value: '师范',
        },
        {
          label: '语言',
          value: '语言',
        },
        {
          label: '财经',
          value: '财经',
        },
        {
          label: '政法',
          value: '政法',
        },
        {
          label: '体育',
          value: '体育',
        },
        {
          label: '艺术',
          value: '艺术',
        },
        {
          label: '民族',
          value: '民族',
        },
        {
          label: '军事',
          value: '军事',
        },
        {
          label: '其他',
          value: '其他',
        },
      ],
      schoolTypeValueList: [],
      schoolTypeIndexList: [],
      rangKey: 'name',
      defaultRegion: ['广东省', '深圳市', '宝安区'],
      schoolList: [],
      // customRegionData: [
      //   {
      //     value: 2,
      //     label: '广东',
      //     children: [
      //       {
      //         value: 3,
      //         label: '深圳'
      //       },
      //       {
      //         value: 4,
      //         label: '广州'
      //       }
      //     ]
      //   },
      //   {
      //     value: 5,
      //     label: '广西',
      //     children: [
      //       {
      //         value: 6,
      //         label: '南宁'
      //       },
      //       {
      //         value: 7,
      //         label: '桂林'
      //       }
      //     ]
      //   }
      // ],

      hideFilters: false, // 控制筛选条件的显示
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      currentMatchingDegree: '院校位置',
      currentMatchingDegreeValue: '',
      currentEducationBackground: '院校层次',
      currentEducationBackgroundValue: '30',
      matchName: '',
      showMatchingDegree: false,
      showEducationBackground: false,
      currentType: '全部专业',
      title: '专业匹配详情',
      navHeight: getApp().globalData.navHeight,
      secondMajorName: '', // 二级专业名称
      currentSubject: '',
      schoolNumber: '450',
      majorNumber: '354',
      currentTypeId: 'professionName0',
      majorList: [],
      parentId: '',
      // majorList: [
      //   {
      //     name: "全部专业",
      //     number: "15151",
      //     percent: "46.5%",
      //   },
      //   {
      //     name: "临床医学",
      //     number: "15151",
      //     percent: "46.5%",
      //   },
      //   {
      //     name: "口腔医学",
      //     number: "15151",
      //     percent: "46.5%",
      //   },
      //   {
      //     name: "心脏外科",
      //     number: "15151",
      //     percent: "46.5%",
      //   },
      // ],
    };
  },
  onLoad(opt) {
    Object.keys(opt).forEach((key) => {
      opt[key] = decodeURIComponent(opt[key]);
    });
    console.log('opt', opt);
    this.pageNo = 1;
    this.schoolList = [];
    this.subjectCombination = opt.subjectCombination;
    this.secondMajorName = opt.secondName;
    this.currentSubject = opt.currentSubject;
    this.currentType = opt.name;
    this.positionTagId = opt.positionTagId;
    this.parentId = opt.parentId;
    this.schoolInfoFirstSubject = opt.currentSubject.substring(0, 2);
    this.schoolInfoSecondSubject = opt.currentSubject.substring(3).split('、');
    this.getProfessionSonListFn(opt.parentId);
    const positionInfo = Object.keys(opt)
      .map(
        (key) => `${encodeURIComponent(key)}=${encodeURIComponent(opt[key])}`
      )
      .join('&');
    this.imageUrl =
      'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png'; //必须重新赋值
    this.sharePath = `/pagesSub/nationalCollegeEntranceExamination/majorDetail/index?${positionInfo}`;
    if (!this.personId) {
      this.$refs.loginDialog.setVisibility(true);
      return;
    }
  },
  methods: {
    async cardRegistFn() {
      const params = {
        personId: this.personId,
        force: 1,
      };
      params.cardType = 143;
      const res = await cardRegist(params);
      return res;
    },
    loginSuccessBack() {
      //TODO:登录成功后触发埋点
      this.personId = uni.getStorageSync('person-id').slice(2);
      this.cardRegistFn();
    },
    jumpToMajorDeatil() {
      console.log('positionTagId', this.positionTagId);
      uni.navigateTo({
        url:
          `/pagesSub/careerNew/majorDetail/index?positionTagId=` +
          this.positionTagId,
      });
    },
    onScroll(e) {},
    scrollToCurrentType() {
      const targetIndex = this.majorList.findIndex(
        (item) => item.name === this.currentType
      );
      this.currentTypeId = 'professionName' + targetIndex;
    },
    onScrollToLower() {
      this.pageNo += 1;
      this.getCollegeProfessionListFn();
    },
    gotoSchool(item) {
      const { collegeId } = item;
      uni.navigateTo({
        url: `/pagesSub/nationalCollegeEntranceExamination/campusMatchDetail/index?collegeId=${collegeId}&subjectCombination=${this.subjectCombination}&currentSubject=${this.currentSubject}`,
      });
    },
    async getCollegeProfessionListFn() {
      const params = {
        matchName: this.matchName,
        subjectCombination: this.subjectCombination,
        levelName: this.schoolRunningLevelValueList.toString(),
        dualClassName: this.schoolFeatureValueList.toString(),
        natureName: this.schoolRunningTypeValueList.toString(),
        collegeType: this.schoolTypeValueList.toString(),
        // positionTagId: this.positionTagId,
        positionTagIdList: this.positionTagIdList,
        regionId: this.regionId,
        pageNo: this.pageNo,
        pageSize: 10,
      };
      const res = await getCollegeProfessionList(params);
      if (res.code == 200) {
        if (this.schoolList == []) {
          this.schoolList = res.data;
        } else {
          this.schoolList.push(...res.data);
        }
        this.majorSchoolNumber = res.pageparam.sums;
        this.showChooseSubjectPopup = false;
        this.schoolList = this.schoolList.map((item) => {
          item.desc = '';
          item.professionList.forEach((_item, _index) => {
            item.desc += _index + 1 + '.' + _item.cpName + ' （';
            _item.children.forEach((__item, __index) => {
              item.desc = item.desc + __item.cpName + '；';
            });
            item.desc = item.desc + '）；';
          });
          return item;
        });
      }
    },
    async getProfessionSonListFn(positionTagId) {
      const params = {
        parentPositionTagId: positionTagId,
        subjectCombination: this.subjectCombination,
      };
      const res = await getProfessionSonList(params);
      if (res.code == 200) {
        this.majorList = res.data;
        this.schoolNumber = res.data[0].collegeTotalNum;
        this.majorNumber = res.data[0].professionNum;
        this.wholePositionTagIdList = [];
        this.positionTagIdList = [];
        res.data.forEach((item, index) => {
          if (index > 0) {
            this.wholePositionTagIdList.push(item.positionTagId);
            this.positionTagIdList.push(item.positionTagId);
          }
        });
        const temp = this.majorList.find(
          (item) => item.name == this.currentType
        );
        temp && this.changeCurrentType(temp);

        this.$nextTick(() => {
          this.scrollToCurrentType();
        });
      }
    },
    changeData() {
      this.currentSubject =
        this.currentFirstSubject.name +
        ',' +
        this.currentSecondSubjectList[0].name +
        ',' +
        this.currentSecondSubjectList[1].name;
      this.subjectCombination =
        this.currentSecondSubjectList[0].id <
        this.currentSecondSubjectList[1].id
          ? this.currentFirstSubject.id +
            ',' +
            this.currentSecondSubjectList[0].id +
            ',' +
            this.currentSecondSubjectList[1].id
          : this.currentFirstSubject.id +
            ',' +
            this.currentSecondSubjectList[1].id +
            ',' +
            this.currentSecondSubjectList[0].id;
      this.pageNo = 1;
      this.schoolList = [];
      this.schoolInfoFirstSubject = this.currentFirstSubject.name;
      this.schoolInfoSecondSubject = this.currentSecondSubjectList.map(
        (item) => item.name
      );
      // this.getCollegeProfessionListFn();
      this.getProfessionSonListFn(this.parentId);
    },
    selectFirstSubject(item) {
      this.currentFirstSubject = item;
    },
    selectSecondSubject(item) {
      if (this.currentSecondSubjectList.includes(item)) {
        return;
      } else {
        this.currentSecondSubjectList.push(item);
        if (this.currentSecondSubjectList.length > 2) {
          this.currentSecondSubjectList.shift();
        }
      }
    },
    reset() {
      this.schoolRunningLevelValueList = [];
      this.schoolRunningLevelIndexList = [];
      this.schoolRunningTypeValueList = [];
      this.schoolRunningTypeIndexList = [];
      this.schoolFeatureValueList = [];
      this.schoolFeatureIndexList = [];
      this.schoolTypeValueList = [];
      this.schoolTypeIndexList = [];
    },
    search() {
      this.pageNo = 1;
      this.schoolList = [];
      this.getCollegeProfessionListFn();
      this.showEducationBackground = false;
      this.reset();
    },
    chooseSchoolRunningLevel(item, index) {
      if (this.schoolRunningLevelIndexList.includes(index)) {
        this.schoolRunningLevelIndexList =
          this.schoolRunningLevelIndexList.filter((ele) => ele !== index); // 删除元素 'c'
        this.schoolRunningLevelValueList =
          this.schoolRunningLevelValueList.filter(
            (_ele) => _ele !== item.value
          );
      } else {
        this.schoolRunningLevelIndexList.push(index);
        this.schoolRunningLevelValueList.push(item.value);
      }
    },
    chooseSchoolRunningType(item, index) {
      if (this.schoolRunningTypeIndexList.includes(index)) {
        this.schoolRunningTypeIndexList =
          this.schoolRunningTypeIndexList.filter((ele) => ele !== index); // 删除元素 'c'
        this.schoolRunningTypeValueList =
          this.schoolRunningTypeValueList.filter((_ele) => _ele !== item.value);
      } else {
        this.schoolRunningTypeIndexList.push(index);
        this.schoolRunningTypeValueList.push(item.value);
      }
    },
    chooseSchoolFeature(item, index) {
      if (this.schoolFeatureIndexList.includes(index)) {
        this.schoolFeatureIndexList = this.schoolFeatureIndexList.filter(
          (ele) => ele !== index
        ); // 删除元素 'c'
        this.schoolFeatureValueList = this.schoolFeatureValueList.filter(
          (_ele) => _ele !== item.value
        );
      } else {
        this.schoolFeatureIndexList.push(index);
        this.schoolFeatureValueList.push(item.value);
      }
    },
    chooseSchoolType(item, index) {
      if (this.schoolTypeIndexList.includes(index)) {
        this.schoolTypeIndexList = this.schoolTypeIndexList.filter(
          (ele) => ele !== index
        ); // 删除元素 'c'
        this.schoolTypeValueList = this.schoolTypeValueList.filter(
          (_ele) => _ele !== item.value
        );
      } else {
        this.schoolTypeIndexList.push(index);
        this.schoolTypeValueList.push(item.value);
      }
    },
    handleFocus() {
      this.hideFilters = true; // 隐藏左侧筛选条件
      this.showEducationBackground = false;
      // 添加宽度变化的过渡动画
      // 你可以在这里调整动画效果
    },
    handleBlur() {
      this.pageNo = 1;
      this.schoolList = [];
      this.hideFilters = false; // 显示左侧筛选条件
      this.getCollegeProfessionListFn();
    },

    handleMatchingDegreeConfirm(e) {
      console.log('eitem', e);
      this.regionId = e[1].value.toString();
      this.currentMatchingDegree = e[1].label;
      this.pageNo = 1;
      this.schoolList = [];
      this.getCollegeProfessionListFn();
      // e[0]就是索引
      // this.currentMatchingDegree = this.matchingDegreeSelector[e[0]].cateName;
      // this.currentMatchingDegreeValue = this.matchingDegreeSelector[e[0]].id;
    },
    showPicker(params) {
      switch (params) {
        case 'showMatchingDegree':
          this.showMatchingDegree = true; // 这里可以根据需要调整
          this.showEducationBackground = false;
          break;
        case 'showEducationBackground':
          this.showEducationBackground = !this.showEducationBackground;
          break;
        default:
          break;
      }
    },
    changeSubject() {
      console.log('更改科目');
      this.showChooseSubjectPopup = true;
    },
    changeCurrentType(item) {
      this.showEducationBackground = false;
      this.currentType = item.name;
      if (item.name == '全部专业') {
        this.positionTagIdList = this.wholePositionTagIdList;
      } else {
        this.positionTagIdList = [item.positionTagId];
      }
      this.pageNo = 1;
      this.schoolList = [];
      this.getCollegeProfessionListFn();
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
$img-base-person: $img-base + 'careerPath/';
.wrapper {
  background-image: url($img-base + 'careerPath/majorDetailBg.png');
  background-size: 100% 832rpx;
  background-repeat: no-repeat;
  height: 100vh;
  padding: 0 32rpx;
  position: relative;
  overflow: hidden;
  .second-major-name {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 40rpx;
    color: #222222;
  }
  .choose-subject {
    margin-top: 26rpx;
    display: flex;
    flex-direction: row;
    color: #555555;
    .change-btn {
      display: flex;
      align-items: center;
      margin-left: 8rpx;
      .edit-img {
        width: 32rpx;
        height: 32rpx;
      }
      .text {
        font-size: 24rpx;
        color: #109eeb;
        margin-left: 8rpx;
      }
    }
  }
  .number-info {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #555555;
    margin-top: 18rpx;
    span {
      margin: 0 14rpx;
      color: #f65b3c;
    }
  }
  .second-box {
    width: 100%;
    height: 140rpx;
    // width: 100%;
    display: flex;
    white-space: nowrap; /* 防止子元素换行 */
    overflow-x: auto; /* 当内容超出容器宽度时，允许水平滚动 */
    margin-top: 48rpx;
    padding-bottom: 30rpx;
    .second-box-item,
    .active-second-box-item {
      margin-left: 18rpx;
      display: inline-block;
      width: 332rpx;
      padding: 20rpx 24rpx;
      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;
      }
      .per {
        font-weight: bold;
        font-size: 24rpx;
        font-family: PingFang-SC, PingFang-SC;
      }
    }
    .second-box-item {
      &:first-child {
        margin-left: 0;
      }
      height: 122rpx;
      background: linear-gradient(180deg, #edf5ff 0%, #fcfdff 100%);
      border-radius: 12rpx;
      border: 4rpx solid #e4e8f1;
      .per {
        color: #999999;
      }
    }
    .active-second-box-item {
      &:first-child {
        margin-left: 0;
      }
      height: 122rpx;
      background: linear-gradient(180deg, #ffeae8 0%, #fdfbfc 100%);
      border: 4rpx solid #f65b3c;
      border-radius: 12rpx;
      color: #f65b3c;
      position: relative;
    }
    .active-second-box-item :after,
    .active-second-box-item :before {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: '';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .active-second-box-item :after {
      border-color: rgba(19, 26, 213, 0);
      border-top-color: #fdfbfc;
      border-width: 10rpx;
      margin-left: -10rpx;
    }
    .active-second-box-item :before {
      border-color: rgba(0, 0, 0, 0);
      border-top-color: #f65b3c;
      border-width: 16rpx;
      margin-left: -16rpx;
    }
  }
  .third-box {
    position: absolute;
    left: 0;
    background: #ffffff;
    width: 100%;
    .majorFilterContainer {
      .filter-box {
        height: 110rpx;
        width: 100%;
        padding: 22rpx 32rpx 0rpx 32rpx;
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        transition: padding 0.3s ease; // 添加过渡动画
        .matching-degree,
        .education-background {
          margin-right: 16rpx;
          width: 158rpx;
          height: 56rpx;
          background: #f6f6f6;
          border-radius: 12rpx;
          position: relative; /* 确保伪元素相对于这个元素定位 */
          display: inline-flex; /* 使元素适应内容 */
          flex-direction: row;
          align-items: center;
          padding: 4rpx 16rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #888888;
          transition: opacity 0.3s ease; // 添加过渡动画
          &::after {
            content: ''; /* 必须设置内容 */
            position: absolute; /* 绝对定位 */
            bottom: 20rpx; /* 底部对齐 */
            right: 16rpx; /* 右侧对齐 */
            width: 0; /* 宽度为0 */
            height: 0; /* 高度为0 */
            border-width: 10rpx; /* 三角形的大小 */
            border-style: solid; /* 边框样式 */
            border-color: transparent transparent transparent #c0c0c0; /* 三角形颜色，左下角为 #c0c0c0 */
            transform-origin: 0 100%; /* 设置旋转中心点 */
            transform: rotate(45deg); /* 沿 X 轴旋转 -45 度 */
          }
        }
        .search-major {
          width: 336rpx;
          height: 56rpx;
          background: #f6f6f6;
          border-radius: 12rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #888888;
          display: flex; /* 使元素适应内容 */
          flex-direction: row;
          align-items: center;
          padding: 4rpx 16rpx;
          transition: width 0.3s ease; // 添加过渡动画
          flex: 1; // 使用 Flex 布局
          &.expanded {
            width: 100%;
          }
        }
      }
      .school-filter {
        position: absolute;
        width: 100%;
        height: 900rpx;
        overflow: scroll;
        background: #ffffff;
        padding: 0 32rpx 32rpx 32rpx;
        z-index: 999;
        .filter-first {
          height: 764rpx;
          overflow: scroll;
          .title {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #222222;
            margin: 10rpx 0;
          }
          .choose-box {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            .box-item,
            .box-item-active {
              width: 30%;
              height: 68rpx;
              background: #f6f6f6;
              border-radius: 8rpx;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
              padding: 4rpx 16rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #888888;
              margin: 0 16rpx 16rpx 0;
            }
            .box-item {
              color: #888888;
            }
            .box-item-active {
              color: #f65b3c;
            }
          }
        }
        .filter-second {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-top: 40rpx;
          .left-btn,
          .right-btn {
            width: 330rpx;
            height: 80rpx;
            border-radius: 8rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 30rpx;
          }
          .left-btn {
            background: #f7f7f7;
            color: #555555;
            margin-right: 18rpx;
          }
          .right-btn {
            background: #f75a3e;
            color: #ffffff;
          }
        }
      }
      .jump-text {
        width: 100%;
        height: 34rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999990;
        line-height: 34rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 24rpx;
      }
      .line {
        height: 2rpx;
        width: calc(100% - 64rpx);
        margin: 0 auto;
        background: #f5f5f5;
      }
      .school-list {
        // margin-top: 32rpx;
        padding: 22rpx 44rpx 0 50rpx;
        .title {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #555555;
        }
        .schoolListContainer {
          display: flex;
          flex-direction: column;
          overflow-y: scroll;
          height: calc(100vh - 800rpx);
          margin-top: 32rpx;
          // margin-bottom: 132rpx;
          .school-info {
            display: flex;
            flex-direction: row;
            margin-bottom: 36rpx;
            position: relative;
            .left {
              width: 88rpx;
              height: 88rpx;
              margin-right: 16rpx;

              .avatar {
                width: 88rpx;
                height: 88rpx;
              }
            }
            .right {
              flex: 1;
              height: 240rpx;
              display: flex;
              flex-direction: column;
              padding-top: 4rpx;
              box-sizing: border-box;
              .name {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 800;
                font-size: 28rpx;
                color: #333333;
              }

              .tags {
                margin-top: 10rpx;
                margin-right: 8rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                view {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  view {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    height: 36rpx;
                    background: #fef6ee;
                    border-radius: 4rpx;

                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #e98b54;
                    margin-right: 8rpx;
                    padding: 2rpx 16rpx;
                  }
                }
              }
              .major-info {
                margin-top: 20rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                width: 500rpx; /* 每一项的固定宽度 */
                box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
                overflow: hidden; /* 隐藏超出部分 */
                white-space: nowrap; /* 防止文本换行 */
                text-overflow: ellipsis; /* 超出部分显示为省略号 */
              }
              .subject-info {
                display: flex;
                flex-direction: row;
                margin-top: 28rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #888888;
                &-text {
                  margin-left: 12rpx;
                }
                .active {
                  color: #e98b54;
                }
              }
              .position {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #999990;
              }
            }
          }
          .schoolList-item-border {
            border-bottom: 2rpx solid #f5f5f5;
          }
          .schoolList-item-padding {
            padding-bottom: 66rpx;
          }
        }
      }
    }
  }
}
.choose-subject-box {
  height: 578rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin-top: 46rpx;
  padding: 24rpx;
  .choose-title {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    .left {
      height: 42rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 30rpx;
      color: #222222;
      line-height: 42rpx;
    }
    .right {
      height: 36rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      line-height: 36rpx;
      margin-left: 24rpx;
    }
  }
  .choose-box {
    margin: 28rpx 0 40rpx 0;
    display: flex;
    align-items: center;
    .choose-box-item,
    .choose-box-item-selected {
      width: 146rpx;
      height: 72rpx;
      border-radius: 8rpx;
      margin-right: 16rpx;
      font-size: 28rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    .choose-box-item {
      border: 2rpx solid #d9d9d9;
      color: #333333;
    }
    .choose-box-item-selected {
      border: 2rpx solid #f75a3e;
      color: #f75a3e;
    }
  }
  .show-data {
    height: 78rpx;
    background: #f5fbff;
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .blue-column {
      width: 2rpx;
      height: 38rpx;
      border: 2rpx solid #b6d5e8;
      margin: 0 30rpx;
      background-color: #b6d5e8;
    }
    .left-data {
      color: #4079a8;
      font-size: 24rpx;
      span {
        margin-left: 8rpx;
        font-size: 28rpx;
        color: #ff8c00;
      }
    }
    .right-data {
      color: #4079a8;
      font-size: 24rpx;
      span {
        margin-left: 8rpx;
        font-size: 28rpx;
        color: #00ac51;
      }
    }
  }
  .search-btn {
    height: 80rpx;
    background: #f75a3e;
    border-radius: 8rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #ffffff;
  }
}
</style>
